<template>
	<view>

		<view  class="search" >
			<!-- 设置圆角 -->
			<view>
				<uni-search-bar  :radius="100" class="searchInput"  placeholder="请输入美食名" v-model="searchtext" @confirm="search"></uni-search-bar>
			</view>
			<view  class="pickerAddress" >
				<pickerAddress @change="change">{{txt}}</pickerAddress>
			</view>
		</view>
		<view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" indicator-color="#999999" indicator-active-color="white" :indicator-dots="indicatorDots"
						 :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
							<swiper-item>
								<view class="swiper-item uni-bg-red">
									<image src="/static/food/index_1.jpg"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green">
									<image src="/static/food/index_2.jpg"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue">
									<image src="/static/food/index_3.jpg"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<!-- 下拉框选营地    和排序选项 -->
		<view class="selemenu">
			<view class="selemenu">
				<ms-dropdown-menu>
					<ms-dropdown-item v-model="campId" :list="list">
						<view slot="title">
							<view class="dropdown-item-title">
								<view class="title btn">营地</view>
							</view>
						</view>
					</ms-dropdown-item>
					<ms-dropdown-item v-model="sort" :list="list1">
						<view slot="title">
							<view class="dropdown-item-title">
								<view class="title btn">排序</view>
							</view>
						</view>
					</ms-dropdown-item>
				</ms-dropdown-menu>
				<!-- <view  class="newcampId">输出：{{campId}}</view>
				<view class="enwsort">输出：{{sort}}</view> -->
			</view>
		</view>
		<view class="jishi">
			<text class="icon gengduo" @click="goFoodList(1)">更多美食</text>
		</view>
		<!-- 菜品的图片 -->
		<view class="outter">
			<view class="inner" v-for="(item,index) in foodmodel" :key="item.foodId"  @click="foodDetail(item.foodId)">
				<view class="proname">
					<text>{{item.foodName}}</text>
				</view>
				<view class="ima">
					<image :src="item.img[0].url"></image>
				</view>
				<view class="price">
					<text>¥{{item.price}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// 引入list组件
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	//导入字体图标
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	//三级联动地址
	import pickerAddress from '@/components/hgxcomponents/wangding-pickerAddress/wangding-pickerAddress.vue'
	
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	/* 下拉框的组件 */
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	export default {
		components: {
			
			/* 地址选择的 */
			pickerAddress,
			/* 轮播图的组件 */
			uniList,
			uniListItem,
			uniIcons,
			uniCard,
			uniNavBar,
			uniSection,
			/* 搜索 */
			uniSearchBar,

			/* 下拉框组件 */
			msDropdownMenu,
			msDropdownItem,
			/*  图片菜品组件*/
			// glanceProductList
			foodWatch() {
				const {
					campId,
					sort
				} = this
				return {
					campId,
					sort
				}
			}
		},
		props: {},
		data() {
			return {
				searchtext: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				model: [],
				foodmodel: [],
				list: [],
				list1: [{
						campname: '价格从高到低',
						campId: "desc"
					},
					{
						campname: '价格从低到高',
						campId: "asc"
					},
				],
				campId: 1,
				sort: "desc",
				txt: '城市',
				title: 'Hello',
				
			}
		},
		/* 首先加载当前的城市的下拉框的营地和当前城市的菜品 */
		onLoad: function() {
			/* 下拉框的营地 */
			uni.request({
					url: this.webUrl+'selectCampByCityId?cityId=1',
					dataType: "JSON",
					success: (res) => {
						this.list = res.data.list;
						// console.log(this.list)
					},
					fail: (err) => {
						uni.showToast({
							title: "营地地点加载失败"
						})
					}
				}),
				/* 当前城市的菜品 */
				uni.request({
					url: this.webUrl+'selectAllFood?foodName=&campId=1&sort=desc&pageIndex=1',
					success: (res) => {
						/* this.zhuangei = res.data.obj; */
						this.foodmodel = res.data.list;
						// console.log(res.data.list)
					},
					fail: (err) => {
						uni.showToast({
							title: "商品加载失败"
						})
					}
				})
		},
		created: function() {
		},
		methods: {
			/* 搜索框的搜索方法 */
			search() {
				console.log(this.searchtext.value);
			},
			change(data) {
				console.log(data);
				 var temp = data.data[0];
				console.log(temp);
				temp = temp.replace(/省/g,"")
				console.log(temp);
				temp = temp.replace(/自治区/g,"")
				console.log(temp);
				this.txt = temp;
			},
			
			//地址选择
			choose() {
				this.$refs.dropdownItem.choose()
			},
			close() {
				this.$refs.dropdownItem.closePopup()
			},
			imgclick() {

			},
			//跳转到详情页
			foodDetail(foodId) {
				uni.navigateTo({
					url: "/pages/food/foodDetail/foodDetail?foodId=" + foodId 
				})
			},
			goFoodList(campId){
				uni.navigateTo({
					url:'/pages/food/foodList/foodList?campId='+this.campId
				})
			},
		},

		/* 监听营地和价格排序的属性的变化 */
		watch: {
			'campId': function(newVal, oldVal) {
				console.log((newVal + "--" + oldVal));
				uni.request({
					url:this.webUrl+'selectAllFood?foodName=&campId=' + newVal + '&sort=' + this.sort + 'desc&pageIndex=1',
					success: (res) => {
						this.foodmodel = res.data.list;
						console.log("res" + res)
					},
					fail: (err) => {
						uni.showToast({
							title: "商品加载失败"
						})
					}
				})
				deep: true // 监听这个对象中的每一个属性变化
			},
			'sort': function(newVal1, oldVal) {
				/* 属性变化调用  查询的方法   查询出   商品 */
				uni.request({
					url: this.webUrl+'selectAllFood?foodName=&campId=' + this.campId + '&sort=' + newVal1 + 'desc&pageIndex=1',
					success: (res) => {
						this.foodmodel = res.data.list;
						console.log("res" + res)
					}, 
					
					fail: (err) => {
						uni.showToast({
							title: "商品加载失败"
						})
					}
				})
				deep: true // 监听这个对象中的每一个属性变化
			},
			/*  */
			'searchtext': function(newVal1, oldVal) {
				
				uni.request({
					url:this.webUrl+'selectAllFood?foodName='+this.searchtext.value+'&campId=' + this.campId + '&sort=' + this.sort + '&pageIndex=1',
					success: (res) => {
						this.foodmodel = res.data.list;
						console.log("res" + res)
					}, 
					
					fail: (err) => {
						uni.showToast({
							title: "商品加载失败"
						})
					}
				})
				deep: true // 监听这个对象中的每一个属性变化
			}
		},


	}
</script>

<style lang="scss">
	
	.search{
		width: 750rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		.searchInput{
			width: 600rpx;
		}
		.pickerAddress{
			font-size: 26rpx;
			margin-left: 640rpx;
			margin-top: 30rpx;
			position: absolute;
			width: 150rpx;
			line-height: 30rpx;
		}
	}
	.address_select {
		margin-right: 15rpx;
		font-size: 30rpx;
	}
	/* 轮播图 */
	.swiper {
		width: 750rpx;
		height: 480rpx;

		image {
			width: 100%;
			height: 480rpx;
		}
	}

		.jishi{
			width: 100%;
			height: 60rpx;
			background-color: rgb(220, 220, 220);
			line-height: 120rpx;
			display: flex;
			color:rgb(148,102,102);
			
			.gengduo{
				margin-left: 400rpx;
				font-size: 28rpx;
				color: rgb(119,119,119);
			}
		}


	/* 菜品展示 */
	.outter {
		width: 750rpx;
		// height: 560rpx;
		background-color: rgb(220, 220, 220);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		flex-direction: row;

		.inner {
			// float: left;
			background-color: white;
			width: 330rpx;
			height: 500rpx;
			margin-top: 30rpx;
			margin-bottom: 30px;
			border-radius: 20rpx;

			.proname {
				overflow: hidden;
				width: 300rpx;
				height: 80rpx;
				font-size: 35rpx;
				margin-top: 20rpx;
				margin-left: 10rpx;
				line-height: 80rpx;
			}

			.ima {
				width: 100%;
				height: 330rpx;

				image {
					width: 100%;
					height: 100%;

				}
			}

			.price {
				margin-left: 30rpx;
				padding-top: 10rpx;
				color: rgb(148, 102, 102);
			}
		}

	}
</style>
